/**
 * 动态设置-table列表body高度
 */
export default {
    data() {
        return {
            // 当前表格参数对象名称
            myDgName: null,
            // table列表body高度 默认减去140（navbar、tab、footer的高度）
            bodyHeight: this.U.dataGridHeight()
        }
    },
    // 窗体大小变化就执行getHeight方法即可
    mounted() {
        let that = this;

        that.$nextTick(() => {
            that.setDataGridHeight();
        });
        // 浏览器大小改变时执行
        window.onresize = () => {
            that.setDataGridHeight();
        }
    },
    // 注销window.onresize事件（为了增加性能,要在离开当前页面的时候自动销毁onresize方法,防止误触发,因为我们用的是keep-alive,不会触发Destroyed这个生命周期,所以使用beforeRouteLeave来触发销毁操作）
    beforeRouteLeave(to, from, next) {
        //离开组件的时候触发
        window.onresize = null

        next();
    },
    methods: {
        /**
         * 获取-对象的值
         * @param {*} row       对象
         * @param {*} fieldUrl  对象值路径
         * @returns 值
         */
        getColVal(row, fieldUrl) {
            return this._.get(row, fieldUrl);
        },
        /** 设置-列表高度 */
        setDataGridHeight(t) {
            const that = this;

            // 清除定时器
            if (that.resizeFlag) clearTimeout(that.resizeFlag);

            that.resizeFlag = setTimeout(() => {
                // 获取列表框顶部工具栏高度
                let toolsHeight = that.$refs.dgtools ? that.$refs.dgtools.offsetHeight : 0;

                // 重新计算顶部工具栏的高度
                if (t) {
                    that.bodyHeight = document.documentElement.clientHeight - toolsHeight - 15;
                } else {
                    // 减去工具栏的高度
                    that.bodyHeight = that.U.dataGridHeight(toolsHeight) - 30;
                }

                that.resizeFlag = null;
            }, 100);
        },
        /**
         * 拖动表头宽度（仅重新渲染表格）
         * 需要再 el-table标签加入 @header-dragend="dragHeaderSp"
         * @param {*} newWidth 
         * @param {*} oldWidth 
         * @param {*} column 
         * @param {*} event 
         */
        dragHeaderSp(newWidth, oldWidth, column, event) {
            let that = this;

            that.$refs[that[column.className].tbName].doLayout();
        },
        /**
         * 把每一行的索引放入进row
         * 需要在 el-table标签加入 :row-class-name="rowClassName"
         */
        rowClassName({
            row,
            rowIndex
        }) {
            row.index = rowIndex;
        },
        /**
         * 选中行
         * @param selection 选中的所有行
         * @param row       当前被点击的行
         * 需要在 el-table标签加入 @select="selRow"
         */
        selRow(selection, row) {

            if (!this.myDgName) {
                this.myDgName = row.dgName;

                this[row.dgName].selRows = selection;
                // console.log('选择：选择的行数据数组', selection);
            }
        },
        /**
         * 行的选择改变事件(此函数比上面的selRow函数后执行)
         * 需要为table设置 @selection-change="selRowChange"
         * @param {*} selection 选中的行数据数组
         */
        selRowChange(selection) {
            // console.log('行选');

            if (this.myDgName) {
                this[this.myDgName].selRows = selection;
            } else if (selection.length > 0) { // 选择了行
                let row = selection[0];

                this.myDgName = row.dgName;

                this[row.dgName].selRows = selection;
            }

            console.log(`@selection-change | ${this[this.myDgName].tbName} | 已选中 ${this[this.myDgName].selRows.length} 条`, this[this.myDgName].selRows);
        },
        /**
         * 全选行事件(此函数比上面的selRowChange函数后执行)
         * 需要为table设置 @select-all"selAllRow"
         * @param {Array} selection 选中的行数据数组
         */
        selAllRow(selection) {
            // console.log('全选');
            if (this.myDgName) {
                this[this.myDgName].selRows = selection;
            } else if (selection.length > 0) { // 选择了行
                let row = selection[0];

                this.myDgName = row.dgName;
                this[row.dgName].selRows = selection;
            }

            // console.log('全选改变：选择的行数据数组', this[this.myDgName].selRows);
        },
        /**
         * 获取-当前选中行的数据（实际根据保存的列表下标从数据列表中获取）
         * 只有在表格为复选框列开启了:reserve-selection="true"才必须使用这个
         * 注意：此方法不适用于树形列表，树形列表请通过that.dg.selRows获取
         */
        getSeledRows() {
            let that = this,
                res = [];

            if (that.myDgName) {
                that[that.myDgName].selRows.forEach(it => {
                    let row = that[that.myDgName].list.find(a => it.index == a.index);
                    if (row) res.push(row);
                });
                // 通过index排序
                res = res.sort((a, b) => a.index - b.index);
                console.log(that.myDgName, '123')
            }
            return res;
        },
        /**
         * 清楚选中的行
         */
        clearSeledRows() {
            let that = this;

            if (that.myDgName) that.$refs[that[that.myDgName].tbName].clearSelection();
        },
        /**
         * 展开一行事件
         * 需要在 el-table标签加入 @expand-change="saveRowExpand"
         */
        saveRowExpand(row, expandedState) {
            const that = this;

            let index = that[row.dgName].rowExpands.findIndex(it => {
                return it.index == row.index;
            });
            if (index == -1) { // 不存在
                // 是展开，则添加
                if (expandedState) that[row.dgName].rowExpands.push(row);
            } else { // 存在
                // 是收起，则删除
                if (!expandedState) that[row.dgName].rowExpands.splice(row.index, 1);
            }

            // console.log('展开的行数据数组', that[row.dgName].rowExpands);
        },
        /**
         * 【单选】点击checkbox复选框
         * 使用方式：需要在每行数据加入table参数对象名称 如：dgName: 'dgStaff'
         * 需要为table设置 :highlight-current-row="true"、@select="selSingleRow"、@select-all="disAllSel"
         * dgStaff里面必须有tbName、selRows参数
         */
        checkSingleRow(selection, row) {
            const that = this,
                dgName = row.dgName;

            if (selection.length == 1) { // 单行
                // 高亮选中
                that.$refs[that[dgName].tbName].setCurrentRow(row);
                // 保存选中的行数据
                that[dgName].selRows = [row];
            } else if (selection.length > 1) { // 多行
                // 清空所有选中行
                that.$refs[that[dgName].tbName].clearSelection();
                // 选中当前行
                that.$refs[that[dgName].tbName].toggleRowSelection(row);
                // 高亮选中
                that.$refs[that[dgName].tbName].setCurrentRow(row);
                // 保存选中的行数据
                that[dgName].selRows = [row];
            } else { // 取消选中行
                // 保存选中的行数据
                that[dgName].selRows = [];
                // 取消高亮选中
                that.$refs[that[dgName].tbName].setCurrentRow();
            }

            // console.log('点击复选框选中的行数据', that[dgName].selRows);
        },
        /**
         * 【单选】点击table行
         * 使用方式：需要在每行数据加入table参数对象名称 如：dgName: 'dgStaff'
         * 需要为table设置 :highlight-current-row="true"、@row-click="clickSingleRow"
         * dgStaff里面必须有tbName、selRows参数
         */
        clickSingleRow(row, column, event) {
            const that = this,
                dgName = row.dgName;

            let index = that[dgName].selRows.findIndex(it => row.id == it.id);
            if (index != -1) {
                // 已选中，则取消当前行的选中和高亮

                // 取消当前行选中
                that.$refs[that[dgName].tbName].clearSelection();
                // 取消当前行高亮
                that.$refs[that[dgName].tbName].setCurrentRow();
                // 保存选中的行数据
                that[dgName].selRows = [];
            } else {
                // 取消当前行选中
                that.$refs[that[dgName].tbName].clearSelection();
                // 选中当前行
                that.$refs[that[dgName].tbName].toggleRowSelection(row, true);
                // 高亮选中
                that.$refs[that[dgName].tbName].setCurrentRow(row);
                // 保存选中的行数据
                that[dgName].selRows = [row];
            }

            // console.log('点击行选中的行数据', that[dgName].selRows);
        },
        // 全选失效
        disableAllSel(selection) {
            const that = this;

            if (selection && selection.length > 0) {
                let dgName = selection[0].dgName;
                that.$refs[that[dgName].tbName].clearSelection();

                // 清空选中的行数据
                that[dgName].selRows = [];

                // console.log('点击全选', that[dgName].selRows);
            } else {
                return;
            }
        },
        // 显示/隐藏-更多搜索条件
        onShMoreFt(e) {
            const that = this;

            that[e.dgName].ftState = e.state;

            // 重新设置一下表格高度
            that.setDataGridHeight();
        },
        // 重新渲染列表
        doLayout(tbName) {
            const that = this;

            that.$nextTick(() => {
                that.$refs[tbName].doLayout();
            });
        },

    },
}
